<template>
  <div
    class="query-condition"
    :class="{ 'is-active': active }"
    @click.stop="$emit('add')"
  >
    <el-select
      v-model="defaultModel.fieldName"
      filterable
      clearable
      placeholder="字段名称"
      popper-class="field-wrap"
      class="field-wrap"
      @change="changeFieldName"
    >
      <el-option
        v-for="(item, index) in fieldList"
        :key="index"
        :label="item.columnAlias"
        :value="item.value || item.columnName"
      >
      </el-option>
    </el-select>

    <el-select
      v-model="defaultModel.operator"
      popper-class="symbol-wrap"
      class="symbol-wrap"
      filterable
      clearable
      @change="changeOperator"
    >
      <el-option
        v-for="(item, index) in isLog ? paramOptions : operatorList"
        :key="index"
        :label="item.paramName"
        :value="item.paramValue"
      >
      </el-option>
    </el-select>

    <el-date-picker
      v-if="
        isDateType &&
        defaultModel.operator !== 'IN' &&
        defaultModel.operator !== 'NOTIN'
      "
      :key="defaultModel.operator"
      v-model="defaultModel.value"
      type="datetime"
      placeholder="选择日期时间"
      popper-class="singleTime"
      style="margin-left: 10px; width: 220px"
      @click.stop.native
    >
    </el-date-picker>

    <el-input
      v-else-if="defaultModel.operator !== 'IS'"
      v-model="defaultModel.value"
      @click.stop.native
      style="margin-left: 10px; width: 220px"
    ></el-input>

    <el-select
      v-else
      v-model="defaultModel.value"
      style="margin-left: 10px; width: 220px"
      filterable
      clearable
      @click.stop.native
    >
      <el-option
        v-for="item in ISselectList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <i
      class="el-icon-delete"
      v-if="relations && relations[1] && relations[1].length !== 1"
      @click.stop="$emit('delete', levelId)"
    ></i>
  </div>
</template>
<script>
import { mapState } from "vuex";
import dayjs from "dayjs";
export default {
  name: "QueryCondition",
  data() {
    return {
      fieldNameOptions: [],
      defaultModel: {},
      filterList: [],
      ISselectList: [
        {
          label: "null",
          value: "null",
        },
        {
          label: "not null",
          value: "not null",
        },
      ],
      fieldList: []
    };
  },
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    active: {
      type: Boolean,
      default: false,
    },
    levelId: {
      type: String,
      default: "",
    },
    isLog: {
      type: Boolean,
      default: false,
    },
    relations: {
      type: Array,
      default: () => ["", [{ fieldName: "", operator: "EQ", value: "" }]],
    },
  },
  computed: {
    ...mapState("log", ["typeMapList", "operatorList"]),
    ...mapState("rule", ["typeSearchList"]),
    paramOptions() {
      const typeObj = this.fieldList.find(
        (item) => item.columnName === this.defaultModel.fieldName
      );
      if (!typeObj) return [];
      return typeObj.operatorList;
    },
    isDateType() {
      const typeObj = this.fieldList.find(
        (item) => item.columnName === this.defaultModel.fieldName
      );
      if (!typeObj) return false;
      if (typeObj.columnType === "Date") {
        return true;
      }
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.defaultModel = {
          fieldName: "",
          operator: "",
          value: "",
          ...val,
        };
      },
    },
    defaultModel: {
      deep: true,
      handler(val) {
        const value = this.value;
        if (
          val.fieldName !== value.fieldName ||
          val.operator !== value.operator ||
          val.value !== value.value
        ) {
          if (this.isDateType) {
            if (value.operator !== "IN" && value.operator !== "NOTIN") {
              val.value = val.value
                ? dayjs(val.value).format("YYYY-MM-DD HH:mm:ss")
                : "";
            } else {
            }
          }
          this.$emit("input", val);
        }
      },
    },
  },
  mounted() {
    this.fieldList = this.isLog ? this.typeMapList : this.typeSearchList;
  },
  methods: {
    changeOperator(val) {
      this.defaultModel.value = "";
    },
    changeFieldName(val) {
      if (this.isLog) {
        const typeObj = this.fieldList.find(
          (item) => item.columnName === val
        );
        this.defaultModel.operator = typeObj.operatorList[0].paramValue;
      }
      this.defaultModel.value = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.query-condition {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  border: 1px solid #dedede;
  border-bottom: 0;
  &:last-child {
    border-bottom: 1px solid #dedede;
  }
  &.is-active {
    background: #e6f7ff;
  }
  .el-icon-delete {
    color: #f20;
    margin-left: 20px;
    opacity: 0;
    cursor: pointer;
  }
  &:hover {
    .el-icon-delete {
      opacity: 1;
    }
  }
}

.symbol-wrap {
  margin-left: 10px;
}

.symbol-wrap.el-select {
  width: 80px;
}

.field-wrap {
  ::v-deep .el-input {
    width: 180px;
  }
}

.field-wrap.el-select {
  width: 180px;
}
</style>
